<template>
  <el-dialog
    :title="formData.id ? '编辑子项' :'新增子项'"
    :close-on-click-modal="false"
    :visible.sync="dialogVisible"
    @close='handleDialogCancel'
    width="680px"
  >
    <el-divider></el-divider>
    <div class="item-form">
      <el-form label-width="120px" :model="formData" :rules="rules">

        <el-row>
          <el-col :span="22" align="center">
            <el-form-item label="名称" prop="name">
              <el-input v-model="formData.name" maxlength="100" show-word-limit type="text"
                        placeholder="选择输入评估项目名称"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="22" align="center">
            <el-form-item label="备注" prop="remark">
              <el-input v-model="formData.remark" maxlength="200" show-word-limit type="textarea"
                        placeholder="选择输入备注" :autosize="{ minRows: 4, maxRows: 6 }"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col>
            <el-form-item label="排序" prop="seq">
              <el-input-number v-model="formData.seq" placeholder="排序"></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col>
            <el-form-item label="分值" prop="score">
              <el-input-number v-model="formData.score" placeholder="排序"></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col>
            <el-form-item label="提交次数" prop="submitTimes">
              <el-input-number v-model="formData.submitTimes" placeholder="排序"></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>
    </div>

    <template #footer>
      <el-button @click="handleDialogCancel">取消</el-button>
      <el-button @click="handleDialogSubmit" type="primary">确定</el-button>
    </template>

  </el-dialog>
</template>

<script>
import {CreateItem, GetItem, UpdateItem} from "@/api/bt/student-eval/evalItem";

export default {
  name: "ChildrenItemForm",
  data() {
    return {
      //判断编辑还是新增
      flag: undefined,
      // * 弹框显示标识
      dialogVisible: false,
      formData: {
        //评估项目版本id
        verId: undefined,
        //id
        id: undefined,
        //评估名称
        name: undefined,
        //排序
        seq: undefined,
        //pid
        pid: undefined,
        //评估说明内容
        remark: undefined,
        //得分
        score: undefined,
        //提交次数
        submitTimes: undefined,
      },
      rules: {
        name: [
          {required: true, message: '请输入评估名称', trigger: 'blur'},
        ],
      }
    }
  },
  methods: {
    //表单初始化函数
    init(row, verId, id) {
      this.dialogVisible = true
      this.formData.id = id
      this.formData.verId = verId
      if (id) {
        this.formData.pid = row.pid
        this.getSonEvalVer(id)
      } else {
        this.formData.pid = row.id
      }
    },
    //点击编辑父项dialog 获取父项值
    getSonEvalVer(id) {
      GetItem(id).then((res) => {
        this.formData = res.data
      })
    },
    //取消表单
    handleDialogCancel() {
      this.dialogVisible = false
      this.$emit("eval-fresh")
    },
    //确定
    handleDialogSubmit() {
      //编辑
      if (this.formData.id) {
        UpdateItem(this.formData).then((res) => {
          this.$message({
            message: res.msg,
            type: 'success',
            duration: 1500,
          })
          this.dialogVisible = false
          this.$emit("eval-fresh", true, this.formData.verId)
        })
      } else {
        //新增
        CreateItem(this.formData).then((res) => {
          this.$message({
            message: res.msg,
            type: 'success',
            duration: 1500,
          })
          this.dialogVisible = false
          this.$emit("eval-fresh", true, this.formData.verId)
        })
      }
    }
  },
}
</script>

<style scoped>
/deep/ .el-dialog__header {
  padding-bottom: 0px;
}

/deep/ .el-dialog__body {
  padding: 0px 0px 0px 0px;
}

/deep/ .el-divider--horizontal {
  margin: 15px 0px 15px 0px;
}
</style>
